﻿@{
    ViewBag.Title = "Data Bind List Items As Table";
}

<h2>Data Bind List Items As Table</h2>

<h3>Sample</h3>

<h4>2 Column Table</h4>
@{
    Html.Telerik().DropDownList()
        .Name("twoColDropDownList")
        .HtmlAttributes(new { style = "width:300px" })
        .Render();
}

<h4>3 Column Table</h4>
@{
    Html.Telerik().DropDownList()
        .Name("threeColDropdownlist")
        .HtmlAttributes( new { style = "width:400px" })
        .ClientEvents(events => events.OnLoad("dropdownlist_onLoad").OnChange("dropdownlist_onChange"))
        .Render();
}
<br />
<br />
onChange returned: @Html.TextBox("results", "", new { style = "width:300px;background: buttonface;", @readonly = "readonly" })

<h3>Documentation</h3>
<p>
The DropDownList implements the OnLoad client event.  In the onLoad event handler, the dropdownlist.dataBindAsTable() function
is called to bind the dropdownlist as a table.
</p>

<script type="text/javascript">
    var telerikProducts = [
                { Id: 1, Product: 'ASP.NET AJAX', Category: 'Developer Tools', SubCategory: 'Web UI Controls & Components' },
                { Id: 2, Product: 'ASP.NET MVC', Category: 'Developer Tools', SubCategory: 'Web UI Controls & Components' },
                { Id: 3, Product: 'Silverlight', Category: 'Developer Tools', SubCategory: 'Web UI Controls & Components' },
                { Id: 4, Product: 'WPF', Category: 'Developer Tools', SubCategory: 'Desktop UI Controls & Components' },
                { Id: 5, Product: 'Windows Forms', Category: 'Developer Tools', SubCategory: 'Desktop UI Controls & Components' },
                { Id: 6, Product: 'Windows Phone', Category: 'Developer Tools', SubCategory: 'Mobile UI Controls & Components' },
                { Id: 7, Product: 'Telerik Reporting', Category: 'Developer Tools', SubCategory: 'Report Designer and Viewer' },
                { Id: 8, Product: 'OpenAccess ORM', Category: 'Developer Tools', SubCategory: 'Data Access' },
                { Id: 9, Product: 'Just Code', Category: 'Developer Tools', SubCategory: 'Productivity Tools' },
                { Id: 10, Product: 'Just Mock', Category: 'Developer Tools', SubCategory: 'Productivity Tools' },
                { Id: 11, Product: 'Just Trace', Category: 'Developer Tools', SubCategory: 'Productivity Tools' },
                { Id: 12, Product: 'Just Decompile', Category: 'Developer Tools', SubCategory: 'Productivity Tools' },
                { Id: 13, Product: 'TeamPulse', Category: 'Agile Project Management', SubCategory: '' },
                { Id: 14, Product: 'Test Studio', Category: 'Software Testing Tools', SubCategory: '' },
                { Id: 15, Product: 'Testing Framework', Category: 'Software Testing Tools', SubCategory: '' },
                { Id: 16, Product: 'Sitefinity ASP.NET CMS', Category: 'Web Content Management', SubCategory: '' },
                { Id: 17, Product: 'Add-ons Marketplace', Category: 'Web Content Management', SubCategory: '' },
                { Id: 18, Product: 'SharePoint Acceleration Kit', Category: 'SharePoint', SubCategory: '' },
                { Id: 19, Product: 'Telerik Minifier', Category: 'Free Tools', SubCategory: '' },
                { Id: 20, Product: 'Code Converter', Category: 'Free Tools', SubCategory: '' },
                { Id: 21, Product: 'Razor Converter', Category: 'Free Tools', SubCategory: '' },
                { Id: 22, Product: 'Visual Style Builder', Category: 'Free Tools', SubCategory: '' },
                { Id: 23, Product: 'Template Builder', Category: 'Free Tools', SubCategory: '' }
            ];

    dropdownlist_onLoad = function (e) {
        var dropdownlist = $('#twoColDropDownList').data('tDropDownList');

        dropdownlist.dataBindAsTable({
            data: telerikProducts,
            displayFields: [{
                fieldName: "Product",
                style: "font-weight:bold"
            }, {
                fieldName: "SubCategory",
                style: "color:Blue"
            }],
            selectedField: "Product",
            valueField: "Id",
            height: '500px'
        });


        dropdownlist = $('#threeColDropdownlist').data('tDropDownList');

        dropdownlist.dataBindAsTable({
            data: telerikProducts,
            displayFields: [{
                fieldName: "Product",
                style: "font-weight:bold"
            }, {
                fieldName: "Category"
            }, {
                fieldName: "SubCategory",
                style: "color:Red"
            }],
            selectedField: "Product",
            valueField: "Id",
            height: '300px'
        });
    }

    dropdownlist_onChange = function (e) {
        var dropdownlist = $('#threeColDropdownlist').data('tDropDownList');
        $('#results').val("Text: " + dropdownlist.text() + ", Value: " + dropdownlist.value());
    }

</script>